<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS楼层</title>
	<style>
	  *{margin:0;padding:0;}
	  .floor{position:fixed;z-index:99;width:50px;height:100%;top:100px;left:50px;}
	  .floor ul li{background:#06f;text-align:center;line-height:45px;margin:2px;list-style:none;}
	  .floor ul li a{color:#fff;text-decoration:none;display:block;}
	  
	  .section{width:1000px;margin:0 auto;}
	  .section .f{height:800px;color:#fff;font-size:30px;}
	  .section .f:nth-child(odd){background:#090;}
	  .section .f:nth-child(even){background:#f60;}
	  .section .five{height:2000px;}
	</style>
	<script>
	window.onload = window.onscroll = function(){
	
		var scrollT = document.documentElement.scrollTop;
		//console.log(scrollT);
		var oF = document.querySelectorAll('.f');
		//console.log(oF);
		for(var i=0,len=oF.length; i<len; i++){
			
			var oTop = oF[i].offsetTop;   // 当前元素对象到最顶部的距离
			var oBottom = oTop + oF[i].offsetHeight;  
			if(scrollT >= (oTop-300) && scrollT < (oBottom-300)){
				console.log(i);
				var oLi = document.querySelectorAll('.floor ul li');
				for(var j=0,leng=oLi.length; j<leng; j++){
					oLi[j].style.background = '#06f';
				}
				oLi[i].style.background = '#f00';
			}
		}
	
	}
	
	</script>
	
</head>
<body>
  <div id="demo">
    <div class="floor">
	  <ul>
	    <li><a href="#1f">1F</a></li>
	    <li><a href="#2f">2F</a></li>
	    <li><a href="#3f">3F</a></li>
	    <li><a href="#4f">4F</a></li>
	    <li><a href="#5f">5F</a></li>
	    <li><a href="#6f">6F</a></li>
	    <li><a href="#7f">7F</a></li>
	  </ul>
	</div>
	<div class="section">
	  <div class="one f">
	    <a name="1f"></a>
		1F
	  </div>
	  <div class="two f">
	    <a name="2f"></a>
		2F
	  </div>
	  <div class="three f">
	    <a name="3f"></a>
		3F
	  </div>
	  <div class="four f">
	    <a name="4f"></a>
		4F
	  </div>
	  <div class="five f">
	    <a name="5f"></a>
		5F
	  </div>
	  <div class="six f">
	    <a name="6f"></a>
		6F
	  </div>
	  <div class="seven f">
	    <a name="7f"></a>
		7F
	  </div>
	</div>
  </div>
</body>
</html>